<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="../static/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png"
        th:href="@{/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png}" type="image/png">
    <linK rel="stylesheet" href="../static/css/nav/nav.css" th:href="@{/css/nav/nav.css}">

    <link rel="stylesheet" href="../static/css/Essay-page/Essay-page.css" th:href="@{/css/Essay-page/Essay-page.css}">
    <!--    <linK rel="stylesheet" href="../static/css/nav/nav.css" th:href="@{/css/nav/nav.css}">-->


    <link rel="stylesheet" href="../static/iconFont/iconfont.css" th:href="@{/iconFont/iconfont.css}">
</head>

<body>
    <span class="alert" style="color: red;"></span>
    <!-- 顶部导航栏 -->
    <div th:replace="fragments/top-bar-second::topBarSecond"></div>
    <span class="alert" th:if="${message}" th:text="${message}" style="color: red;"></span>
    <!-- 新闻主体内容 -->
    <div class="article-detail-container">
        <div class="left-sidebar">
            <div class="like-icon icon">
                <!--            <span class="postId" th:text="${post.postId}"></span>-->
                <i class="iconfont icon-dianzan newsLike"></i>
                <span class="Essay-like-count" th:text="${post.likeCount}"></span>
            </div>
            <div class="comment-icon icon">
                <i class="iconfont icon-xinxi"></i>
                <span class="comment-count left-comment-count" th:text="${post.commentCount}"></span>
            </div>
            <div class="favorite-icon icon">
                <i class="iconfont icon-a-xing2_huaban1"></i>
                <span class="favoriteText">收藏</span>
            </div>
            <div class="share-icon icon">
                <i class="iconfont icon-fenxiang"></i>
                <span th:text="${post.shareCount}" class="shareCount"></span>
                <div class="shareLists">
                    <div class="follow-fans">
                        <div class="share-follow">关注</div>
                        <div class="share-fans">粉丝</div>
                    </div>
                    <div class="userList">
                    </div>
                    <div class="share-confirm">点击转发</div>


                </div>
            </div>
        </div>
        <main class="main-content">
            <article class="article">
                <h1 class="article-title" th:text="${post.title}"></h1>
                <div class="article-info">
                    <span class="postId" th:text="${post.postId}" style="display:none"></span>
                    <span class="article-date" th:text="${post.createdTime}"></span>
                    <span class="article-author" th:text="${post.userId}" style="display:none"></span>
                </div>
                <div class="content" th:text="${post.content}"></div>

            </article>
            <!-- 下方评论区 -->
            <div class="Comments-bottom">
                <div class="Comments-bottom-title">
                    <span class="Comments-bottom-title-text">评论</span>
                    <span class="comment-count Comments-bottom-title-nums" th:text="${post.commentCount}"></span>
                </div>
                <div class="Comments-bottom-myInput">
                    <img th:if="${userInfo!=null}" th:src="${userInfo.avatar}" alt="用户头像" class="user-avatar">
                    <div class="Comments-bottom-input logged" th:if="${userInfo!=null}">
                        <textarea placeholder="说点什么吧..." class="mainCommentInput commonCommentInput"></textarea>
                        <div class="Comments-bottom-action">
                            <!--                        <div class="Comments-bottom-emoji-button">😊</div>-->
                            <button class="mainCommentSubmit Comments-bottom-submit commonCommentSubmit">评论</button>
                        </div>
                    </div>
                    <img class=" user-avatar auth-none" th:if="${userInfo==null}"
                        th:src="@{/img/default_avatar/auth-none.png}">
                    <div class="Comments-bottom-input no-login" th:if="${userInfo==null}">
                        <div>请先
                            <span class="pleaseLoginAndComment" style="color:red">登录</span>
                            后发表评论
                        </div>
                    </div>
                </div>
                <div class="comment-list">
                </div>
                <div class="View-other-comments">
                    <span>查看全部</span>
                    <span class="comments-sum comment-count" th:text="${post.commentCount}"></span>
                    <span>条评论</span>
                </div>
                <div class="no-comments" style="display:none">
                    <span>这篇文章暂时没有更多评论</span>
                </div>
            </div>
        </main>

        <!-- 右侧栏 -->

        <div class="right-sidebar">
            <div class="author-profile">
                <img th:src="${author.avatar}" alt="作者头像" class="author-avatar" th:data-user-id="${author.userId}">
                <div class="author-name" th:text="${author.userName}"></div>
                <button class="follow-button">关注</button>
            </div>
            <div class="Headline-Hot-List">

            </div>

        </div>
        <!--右侧评论区弹窗 -->
        <div class="Comment-window">
            <div class="comment-section">
                <div class="comment-header">
                    <h2>评论 <span class="comment-count right-comment-count" th:text="${post.commentCount}"></span></h2>
                    <span class="close-button">×</span>
                </div>
                <div class="Comments-bottom-myInput">
                    <img th:if="${userInfo!=null}" th:src="${session.userInfo.avatar}" alt="用户头像" class="user-avatar">
                    <div class="Comments-bottom-input logged" th:if="${userInfo!=null}">
                        <textarea placeholder="说点什么吧..." class="mainCommentInput commonCommentInput"></textarea>
                        <div class="Comments-bottom-action">
                            <button class=" mainCommentSubmit Comments-bottom-submit commonCommentSubmit">评论</button>
                        </div>
                    </div>
                    <img class=" user-avatar auth-none" th:if="${userInfo==null}"
                        th:src="@{/img/default_avatar/auth-none.png}">
                    <div class="Comments-bottom-input no-login" th:if="${userInfo==null}">
                        <div>请先
                            <span class="pleaseLoginAndComment" style="color:red">登录</span>
                            后发表评论
                        </div>
                    </div>
                </div>
                <div class="comment-list rightCommentList">
                </div>
                <div class="right-no-comments" style="display:none">
                    <span>暂无评论，发表第一条评论抢沙发~</span>
                </div>
            </div>

        </div>
    </div>
    <div class="confirm-popup">
        <div class="popup-content">
            <div class="container">
                <div class="close">
                    <span class="delete-close-button">&times;</span>
                </div>
                <div class="confirm-text">
                    确定删除此评论吗?
                </div>
                <div class="confirm-alert">
                    删除后将不可恢复,请谨慎操作
                </div>
                <div class="confirm-footer">
                    <button class="cancel-button">取消</button>
                    <button class="confirm-button">确定</button>
                </div>
            </div>


        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="../static/js/nav.js" th:src="@{/js/nav.js}"></script>
    <script th:inline="javascript">
        // 使用 Thymeleaf 直接获取后端传递的 allComments 列表
        // const allComments = /*[[${allComments}]]*/ [];
        //
        // // 从评论列表中提取所有 commentId 并存储到数组
        // const allCommentIds = allComments.map(comment => comment.commentId);
        //
        // // 将 commentId 数组存储到 localStorage 或全局变量中
        // localStorage.setItem('allCommentIds', JSON.stringify(allCommentIds));
        // console.log('已存储所有评论ID:', allCommentIds);
        const post = /*[[${post}]]*/[];
        console.log(post);
        // 通过Thymeleaf表达式获取userInfo
        var userInfo = /*[[${userInfo}]]*/ null;
        if (userInfo && userInfo.userId) {
            localStorage.setItem('userInfo', JSON.stringify(userInfo));
            localStorage.setItem('isLoggedIn', 'true');
            console.log('用户信息已存储到LocalStorage');
        } else {
            // 未登录时清空localStorage（避免残留旧数据）
            localStorage.removeItem('userInfo');
            localStorage.removeItem('isLoggedIn');
            console.log('未登录，清空LocalStorage');
        }

    </script>
    <script src="../static/js/Essay-page.js" th:src="@{/js/Essay-page.js}"></script>

    <!--<script th:inline="javascript">-->
    <!--    // 初始评论渲染完成后，手动触发事件绑定-->
    <!--    bindDeleteCommentEvents();-->
    <!--</script>-->
</body>

</html>